<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css">
     <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
     <script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title></title>
    <style type="text/css">
      nav.navbar{
        background: url(./src/img1.jpg);
      }
      .img-list{
        display: flex;
      }
      .img-list>.col-2{
        margin: 5px;
      }
      .img-list>.col-2>img:hover{
        border: 2px solid red;
      }
      .price{
        font-size: 12pt;
        color: red;
      }
      .price>span:nth-of-type(1){
        font-size: 14pt;
      }
      .price>span:nth-of-type(2){
        margin-left: 90px;
        color: #aaa;
        font-size: 12pt;
      }
      .benefit{
        min-height: 45px;
      }


      .nav-custom{
        list-style: none;
        display: block;
        overflow: hidden;
        white-space: nowrap;
      }
      .nav-custom>div>li{
        display: inline-block;
        margin-left: 20px;
      }
      .nav-custom>div>li>a{
        text-decoration: none;
      }
      .nav-custom{
        background: #fff;
        border: 0;
      }

      #comment{
        margin: 50px;
      }
      #comment-list{
        list-style: none;
      }
      #comment-list>li{
        display: inline-block;
        margin-top: 20px;
      }

      .comment-avatar img{
        width: 99px;
        height: 90px;
      }
      .comment-imglist{
        display: flex;
        flex-flow: wrap;
      }
      .comment-imglist img{
        width: 99px;
        height: 90px;
        margin: 10px;
      }
    </style>
  </head>
  <body>
    <nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse"
                data-target="#example-navbar-collapse">
            <span class="sr-only">切换导航</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
          <img class="navbar-brand" style="width:120px; height:50px"src="./src/logo.png" alt="" />

    </div>
    <div class="collapse navbar-collapse" id="example-navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li class="active"><a href="#">旅游推荐</a></li>
            <li><a href="#">熊旅专线</a></li>
            <li><a href="#">出入境游</a></li>
            <li><a href="#">旅游攻略</a></li>
            <li><a href="#">熊旅直播</a></li>
            <li><a href="#">娱乐时事</a></li>
            <li><a href="#">演艺制作</a></li>
            <li><a href="#">联系我们</a></li>
            <li><a href="#">登陆/注册</a></li>
        </ul>
    </div>
    </div>
    </nav>


    <div class="container-fluid" style="border:2px solid #eee; margin:5px;">
      当前位置:
      <ol class="breadcrumb">
          <li><a href="#">熊旅推荐</a></li>
          <li><a href="#">旅游推荐</a></li>
          <li class="active">旅游详情</li>
        </ol>

        <div class="row"  style="min-height:400px;">
          <div class="col-lg-6 big-img">
            <img src="./src/img3.jpg" width="608" height="277" alt="">

            <div class="img-list">
              <div class="col-2">
                <img src="./src/img1.jpg" width="90" height="80" alt="">
              </div>
              <div class="col-2">
                <img src="./src/img2.jpg" width="90" height="80" alt="">
              </div>
              <div class="col-2">
                <img src="./src/img3.jpg" width="90" height="80" alt="">
              </div>
              <div class="col-2">
                <img src="./src/img1.jpg" width="90" height="80" alt="">
              </div>
              <div class="col-2">
                <img src="./src/img2.jpg" width="90" height="80" alt="">
              </div>
              <div class="col-2">
                <img src="./src/img3.jpg" width="90" height="80" alt="">
              </div>
            </div>
          </div>
          <div class="col-lg-6">
            <h3>【纯美云南】昆明、大理、丽江、腾冲、芒市、  瑞丽双飞单卧深度八日游</h3>
            <p class="price">¥ <span>1230</span> 起   /人      <span>好评率：<strong class="great-rate">90%</strong>     月销量：<strong class="month-sale">100</strong></span></p>

            <p class="benefit">优惠政策： <span>优惠信息......................................                     可赠送 121 里程</span></p>
            <p class="origin">出发地： <span>xxxxxxxxxx</span></p>
            <p class="destination">目的地： <span>xxxxxxxxxx</span></p>
            <p class="day">行程天数：<span>8天</span></p>
            <p>出游时间：<input  class="time" type="date" value="0"></p>
            <div>出游人数：
              <p>成人:</p>
                <input type="text" class="spinner" name="" value="0">
              <p>儿童:</p>
                <input type="text" class="spinner" name="" value="0">
            </div>
            <p>特色服务：<span>洱海边自由骑行 |  双索道（苍山中和索道+冰川大索道）观赏大型原生态演出《印象丽江》赠送温泉体验洞山温泉SPA</span></p>
            <button type="button" class="btn btn-default pull-right" style="border:1px solid #E51C23;color:#E51C23; margin:10px;"name="button">立即订购</button>
          </div>

        </div>
    </div>

    <ul class="navbar navbar-default navbar-static-top pull-left nav-custom">
      <div class="container">
        <li><a class="active" href="#content">行程介绍</a></li>
        <li><a href="#fee">费用</a></li>
        <li><a href="#pre-know">预约须知</a></li>
        <li><a href="#comment">熊宝点评</a></li>
      </div>
    </ul>

    <div class="container" id="content">

    </div>
    <div class="container" id="fee">
      费用
      <div class="fee-detail" style="margin-left:50px;">
        费用包含:
        <ol>
          <li>往返经济舱机票、燃油附加费（以实际收费标准为准）、去程旅游巴士</li>
          <li>行程所列酒店住宿费用</li>
          <li>部分餐食(具体情况请见行程推荐/安排)。</li>
          <li>领队和当地中文导游服务。</li>
          <li>跟团游期间用车费用。</li>
          <li>行程中所列景点首道大门票</li>
          <li>年龄2--12周岁（不含）,不占床,服务标准同成人</li>
          <li>xxxxxxxxxxx</li>
        </ol>
        费用不含:
        <ol>
          <li>超重行李的托运费、保管费。</li>
          <li>因交通延阻、罢工、天气、飞机、机器故障、航班取消或更改时间等不可抗力原因所导致的额外费用。</li>
          <li>酒店内洗衣、理发、电话、传真、收费电视、饮品、烟酒等个人消费。</li>
          <li>“费用包含”中不包含的其它项目。</li>
          <li>xxxxxxx</li>
        </ol>


      </div>
    </div>

    <div class="container" id="pre-know">
      预约须知
      <ol>
        <li>xxxxxxxxxxxxxxx</li>
        <li>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</li>
        <li>xxxxxxx</li>
        <li>xxxxxxx</li>
        <li>xxxxxxx</li>
      </ol>
    </div>

    <div id="comment">
      熊宝点评

      <ul id="comment-list">
        <li><div class="row">
          <div class="col-lg-2 col-sm-2 col-md-2 comment-avatar">
            <img src="./src/img2.jpg" width="99" height="90" alt="">
            <p>xxxxxx</p>
          </div>
          <div class="col-lg-10 col-sm-10 col-md-10">
            <p>fadshfgasdfkhgasdlfgasdlfashdlfhasdfkljasdhlfk</p>
            <div class="comment-imglist">
              <img src="./src/img1.jpg" alt="">
              <img src="./src/img1.jpg" alt="">
              <img src="./src/img1.jpg" alt="">
              <img src="./src/img1.jpg" alt="">
              <img src="./src/img1.jpg" alt="">
              <img src="./src/img1.jpg" alt="">
              <img src="./src/img1.jpg" alt="">
            </div>
          </div>
        </div></li>


        <li><div class="row">
          <div class="col-lg-2 col-sm-2 col-md-2 comment-avatar">
            <img src="./src/img2.jpg" width="99" height="90" alt="">
            <p>xxxxxx</p>
          </div>
          <div class="col-lg-10 col-sm-10 col-md-10">
            <p>fadshfgasdfkhgasdlfgasdlfashdlfhasdfkljasdhlfk</p>
            <div class="comment-imglist">
              <img src="./src/img1.jpg" alt="">
              <img src="./src/img1.jpg" alt="">
              <img src="./src/img1.jpg" alt="">
              <img src="./src/img1.jpg" alt="">
              <img src="./src/img1.jpg" alt="">
              <img src="./src/img1.jpg" alt="">
              <img src="./src/img1.jpg" alt="">
            </div>
          </div>
        </div></li>


                <li><div class="row">
                  <div class="col-lg-2 col-sm-2 col-md-2 comment-avatar">
                    <img src="./src/img2.jpg" width="99" height="90" alt="">
                    <p>xxxxxx</p>
                  </div>
                  <div class="col-lg-10 col-sm-10 col-md-10">
                    <p>fadshfgasdfkhgasdlfgasdlfashdlfhasdfkljasdhlfk</p>
                    <div class="comment-imglist">
                      <img src="./src/img1.jpg" alt="">
                      <img src="./src/img1.jpg" alt="">
                      <img src="./src/img1.jpg" alt="">
                      <img src="./src/img1.jpg" alt="">
                      <img src="./src/img1.jpg" alt="">
                      <img src="./src/img1.jpg" alt="">
                      <img src="./src/img1.jpg" alt="">
                    </div>
                  </div>
                </div></li>



                        <li><div class="row">
                          <div class="col-lg-2 col-sm-2 col-md-2 comment-avatar">
                            <img src="./src/img2.jpg" width="99" height="90" alt="">
                            <p>xxxxxx</p>
                          </div>
                          <div class="col-lg-10 col-sm-10 col-md-10">
                            <p>fadshfgasdfkhgasdlfgasdlfashdlfhasdfkljasdhlfk</p>
                            <div class="comment-imglist">
                              <img src="./src/img1.jpg" alt="">
                              <img src="./src/img1.jpg" alt="">
                              <img src="./src/img1.jpg" alt="">
                              <img src="./src/img1.jpg" alt="">
                              <img src="./src/img1.jpg" alt="">
                              <img src="./src/img1.jpg" alt="">
                              <img src="./src/img1.jpg" alt="">
                            </div>
                          </div>
                        </div></li>





      </ul>
    <script type="text/javascript">
      // const textDOM = $('.spinner');
      // textDOM.before('<button class="btn btn-primary" onclick="reduce();">-</button>');
      // textDOM.after('<button class="btn btn-primary" onclick="plus();">+</button>');
      // function reduce(){
      //   // var valueStr = $('.spinner').val();
      //   var valueStr = textDOM.val();
      //   var value = Number(valueStr);
      //   if(value-1<0){
      //     $('.spinner').val(0);
      //   }else {
      //     $('.spinner').val(value-1);
      //   }
      // }
      // function plus(){
      //   var valueStr = textDOM.val();
      //   var value = Number(valueStr);
      //   $('.spinner').val(value+1);
      // }

      const list = $('.spinner');
      // console.dir(list);

      for(let i=0;i<list.length;i++){
        // var spinner = list[i];
        const str = '.spinner:nth-of-type('+(i+1)+')';
        const spinner = $(str);
        // console.dir(spinner);
        spinner.before('<button class="btn btn-primary" onclick="reduce(event);">-</button>');
        spinner.after('<button class="btn btn-primary" onclick="plus(event);">+</button>');
        function reduce(event){
          console.dir(event.target);
          var value = +event.target.nextElementSibling.value;
          if(value-1<0){
            event.target.nextElementSibling.value=0;
          }else {
            event.target.nextElementSibling.value=value-1;
          }
        }

        function plus(event){
          console.dir(event.target);
          var value = +event.target.previousElementSibling.value;
          event.target.previousElementSibling.value=value+1;
        }

      }
      // $('#reduce').click(function(){
      //   var valueStr = $('.spinner').val();
      //   var value = Number(valueStr);
      //   if(value-1<0){
      //     $('.spinner').val(0);
      //   }else {
      //     $('.spinner').val(value-1);
      //   }
      // });
      //
      // $('#plus').click(function(){
      //   var valueStr = $('.spinner').val();
      //   var value = Number(valueStr);
      //   $('.spinner').val(value+1);
      // });
      // $('.big-img').mouseover(function(){
      //
      // });
      // $('.img-list>.col-2>img').attr()

      $('.img-list>.col-2>img').mouseover(function(event){
        var src = event.target.attributes[0].nodeValue;
        $('.img-list>.col-2>img').css("border","0");
        event.target.style.border="2px solid red";
        console.log(src);
        $('.big-img>img').attr('src',src);
      });

    </script>
  </body>
</html>
